<template>
  <div class="fl lineChartBox" ref="myLine"></div>
</template>
<script>
let echarts = require('echarts/lib/echarts');
  export default {
    name: 'myBarChart',
    props: ['chartData'],
    data () {
      return {

      }
    },
    created () {
      
    },
    mounted() {
      this.drawLine()
    },
    methods: {
      drawLine() {
        var _this=this;
        let dom= this.$refs.myLine;
        let myLine = echarts.init(dom);
        //console.log('chartData',this.chartData);
        var yAxisData=[];
        var xAxisData=[];
        if(this.chartData.length>0){
          this.chartData.forEach(function(i){
            var date=i.create_date.split(" ");
            yAxisData.push(date[0]);
            xAxisData.push(i.count);
          })
        }
        // 绘制图表
        myLine.setOption({
          textStyle: {
            color:'#fff',
          },
          title: {
            text: '近十日制品数量',//_this.title
            x:'right',
            subtext:'',//_this.subtitle
            textStyle: {
              color: '#fff',
              fontSize:20,
            },
            top: '0px',
            subtextStyle: {
              color: '#a0a0a0',
              fontSize: 15,
            },
          },
          legend: {
            data:['近十日制品数量'],
            show:false,
            top:'20px',
            textStyle: {
              color: '#fff',
            },
          },
          grid: {
            left: '20%',right: '10%',bottom:'30px',
          },
          tooltip: {},
          xAxis: {
            //interval:100,
            name: '产量',
            boundaryGap: false,
            nameLocation: 'end',
            axisLine: {
              show:true,
              lineStyle: {
                color: '#4388cd',
                width: 1,
              },
            },
            axisTick: {show:false,},
            splitLine: {
              show: true,
              interval: 'auto',
              lineStyle: {
                color: ["#0f5070"],
                type: 'dashed',
              },
            },
            axisLabel: {
              //align:'left',
            },
          },
          yAxis: {
            name: '日期',
            data: yAxisData,//["2019/05/01", "2019/05/01", "2019/05/01", "2019/05/01", "2019/05/01"],
            nameLocation: 'end',
            axisLine: {
              show: true,
              lineStyle: {
                color: '#4388cd',
                width: 1,
              },
            },
            axisTick: {show:false,},
            splitLine: {
              show: false,
              interval: 'auto',
              lineStyle: {
                color: ["#629fc2"],
                type: 'dashed',
              },
            },
          },
          series: [
            {
              name: '近十日制品数量',
              type: 'bar',
              data: xAxisData,//[6,16,23,39,46],
              itemStyle: {
                color:function (params){
                  //console.log('params',params);
                  var colorList = ['#6bedaf','#f784fd','#35bafb','#e9cc68','#f36c7a'];
                  if(params.value<10){
                    return colorList[0];
                  }else if(params.value > 10 && params.value < 20){
                    return colorList[1];
                  }else if(params.value >20  && params.value < 30){
                    return colorList[2];
                  }else if(params.value >30  && params.value < 40){
                    return colorList[3];
                  }else{
                    return colorList[4];
                  }
                },
              },
              barWidth:30,
              label: {
                show:false,
                position: 'top',
                color: '#fff',
              },
            },
          ]
        });
      },
    }
  }
</script>
<style scoped>
</style>
